<template>
  <div>
    <Echart
        :options="options"
        id="centreLeft1Chart2"
        ref="centreLeft1ChartRef2"
        height="244px"
        width="472px"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
import { isNotEmpty } from '@/utils'

export default {
  data() {
    return {
      options: {},
    }
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => {
        return {
          xData: [],
          lineSeriesData: [],
          barSeriesData: []
        }
      }
    },
  },
  watch: {
    cdata: {
      handler(newData) {
        if (!isNotEmpty(newData)) return
        this.getData(newData)
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    getData(v) {
      const {xData, lineSeriesData, barSeriesData} = v
      // 将柱状图和折线图数据合并到 series 数组中（保持柱状图在前，折线图在后）
      const allSeries = [...barSeriesData, ...lineSeriesData]

      this.options = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#083264',
          textStyle: {
            fontFamily: 'PingFang SC, PingFang SC',
            fontWeight: '500',
            fontSize: 11,
            color: '#fff',
            borderColor: '#041432'
          },
          axisPointer: {
            type: 'cross',
            label: {
              show: true,
              textStyle: {
                fontFamily: 'PingFang SC, PingFang SC',
                fontWeight: '500',
                fontSize: 11,
                color: '#083264'
              }
            }
          },
        },
        legend: {
          data: ['警情总量', '同期警情量', '同比变化'],
          top: 12,
          itemWidth: 10,
          itemHeight: 4,
          textStyle: {
            fontFamily: 'PingFang SC, PingFang SC',
            fontWeight: '500',
            fontSize: 11,
            color: '#A7C5D9'
          }
        },
        xAxis: {
          type: 'category',
          data: xData,
          axisLabel: {
            textStyle: {
              fontFamily: 'PingFang SC, PingFang SC',
              fontWeight: '500',
              fontSize: 11,
              color: '#A7C5D9'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              fontFamily: 'PingFang SC, PingFang SC',
              fontWeight: '500',
              fontSize: 11,
              color: '#A7C5D9'
            }
          }
        },
        series: allSeries,
        grid: {
          top: '20px',
          bottom: '30px'
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
